// 引入公共样式
require("../../assets/css/communal.less");

// 引入字体图标
require("../../assets/fonts/fitness-fonts/iconfont.css");

const axios = require("../../util/axios.js");
// 引入工具js
const dom = require("../../util/dom.js");

// 引入当前页样式
require("./sports_details_play.less");

// 当前页js
document.addEventListener("DOMContentLoaded", function () {
	// 拿到本地保存的数据，渲染到页面
	const fragments = JSON.parse(localStorage.getItem("fragments"));
	console.log(fragments);
	// 用于控制视频的节数
	let n = 0;
	let video = dom.$("#video");
	let startup = Date.now(); // 进入页面开始计时
	let duration = 0; // 持续时间
	//封函数方便调用
	function play() {
		// 渲染视频
		video.src = axios.defaults.baseURL + fragments[n].videoUrl;
		// 渲染节数
		dom.$("#pn").textContent = n + 1;
		// 渲染总节数
		dom.$("#tns").textContent = fragments.length;
		// 渲染课程说明
		dom.$("h3").textContent = fragments[n].title;
		video.play();
		// 进度条
		timer = setInterval(function () {
			dom.$(".progress").style.width =
				(100 * video.currentTime) / video.duration + "%";
		}, 50);
	}
	play();

	// 视频播放完毕继续播放下一个
	video.addEventListener("ended", function () {
		n++;
		if (n >= fragments.length) {
			// 显示蒙层
			dom.$("#mask").style.display = "block";
			// 显示按钮
			dom.$(".btnbox").style.display = "flex";
			// 显示下方提示盒子
			dom.$(".hint").style.display = "flex";
			return;
		}
		play();
	});

	// 点击进行上一届视频
	dom.$("#previous").addEventListener("click", function () {
		n--;
		if (n < 0) {
			n = 0;
		}
		play();
	});

	// 点击进行下一个视频
	dom.$("#next").addEventListener("click", function () {
		n++;
		if (n >= fragments.length) {
			n = fragments.length - 1;
		}
		play();
	});

	// 点击暂停视频
	dom.$("#play").addEventListener("click", function () {
		// 显示蒙层
		dom.$("#mask").style.display = "block";
		// 显示按钮
		dom.$(".btnbox").style.display = "flex";
		// 显示下方提示盒子
		dom.$(".hint").style.display = "flex";
		video.pause();

		// 计算时间
		duration = Date.now - startup;

		// 渲染提示框
		dom.$(".hint img").src = axios.defaults.baseURL + fragments[n].imgUrl;
		dom.$(".text").textContent = fragments[n].title;
	});

	// 点击开始播放
	dom.$("#start").addEventListener("click", function () {
		// 隐藏蒙层
		dom.$("#mask").style.display = "none";
		// 隐藏按钮
		dom.$(".btnbox").style.display = "none";
		// 隐藏下方提示盒子
		dom.$(".hint").style.display = "none";
		if (n === fragments.length) {
			n = 0;
			play();
		}
		video.play();

		//重新计时
		startup = Date.now();
	});

	// 结束训练
	dom.$("#end").addEventListener("click", function () {
		duration = Math.floor(duration / 1000);
		let calorie = Math.ceil(duration * 1.57);

		axios
			.post("/api/exercise/save", {
				type: 2,
				duration,
				calorie,
			})
			.then((res) => {
				if (res.data.errno === 0) {
					alert("训练完成");
					location.href = "sports_course.html";
				}
			});
	});
});
